<template>
  <div class="page">
    <nav-bar title="评价反馈" border></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <van-form validate-trigger="onSubmit" :show-error="false" :label-width="120" @submit="onSubmit">
        <van-field
          required
          name="appOpinionTypeName"
          v-model="formParams.appOpinionTypeName"
          label="类型"
          placeholder="请选择"
          right-icon="arrow"
          :rules="rules.appOpinionTypeName"
          @click="dictOpenPopup('appOpinionType')"
        />
        <van-cell size="large" title="评价反馈" :border="false" />
        <van-field
          class="van-field__value--textarea"
          v-model="formParams.opinion"
          rows="12"
          autosize
          type="textarea"
          maxlength="500"
          placeholder="请将您处置问题时遇到的问题进行反馈或对网格工作进行评价"
          show-word-limit
          :border="false"
          :rules="rules.opinion"
        />
        <div style="margin: 32px 16px">
          <van-row :gutter="23">
            <van-col span="12">
              <van-button block native-type="button" @click="onClear">清空</van-button>
            </van-col>
            <van-col span="12">
              <van-button block type="info" native-type="submit" :loading="button.loading" :disabled="button.disabled">
                {{ button.text }}
              </van-button>
            </van-col>
          </van-row>
        </div>
      </van-form>
    </div>
    <!-- 字典项 -->
    <van-popup v-model="dictPopupShow" round position="bottom" @close="dictValue = ''">
      <van-picker
        show-toolbar
        :default-index="dictData[dictType] && dictData[dictType].findIndex(o => o.code === dictValue)"
        :columns="dictData[dictType]"
        value-key="description"
        @cancel="dictPopupShow = false"
        @confirm="dictOnConfirm"
      />
    </van-popup>
  </div>
</template>
<script>
import Routine from '@/api/routine'
import SelectPopup from '@/mixins/selectPopup'
export default {
  mixins: [SelectPopup],
  data() {
    return {
      formParams: {
        opinionType: '',
        appOpinionType: '',
        appOpinionTypeName: '',
        opinion: ''
      },
      rules: {
        appOpinionTypeName: [{ required: true, message: '请选择评价反馈类型', trigger: 'change' }],
        opinion: [
          { required: true, message: '请输入您的评价反馈' },
          {
            validator: val => {
              return val.length >= 5
            },
            message: '评价反馈至少填写5个字'
          }
        ]
      },
      button: {
        disabled: false,
        loading: false,
        text: '提交'
      },
      dictTypes: 'appOpinionType'
    }
  },
  mounted() {
    this.getDict(this.dictTypes)
  },
  methods: {
    onClear() {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否清空所有内容',
          confirmButtonText: '是',
          cancelButtonText: '否'
        })
        .then(() => {
          this.formParams.opinion = ''
          this.formParams.opinionType = ''
          this.formParams.appOpinionType = ''
          this.formParams.appOpinionTypeName = ''
        })
    },
    onSubmit() {
      this.formParams.opinionType = this.formParams.appOpinionType
      delete this.formParams.appOpinionType
      delete this.formParams.appOpinionTypeName
      Routine.Opinion.save(this.formParams)
        .then(res => {
          this.button.disabled = false
          this.button.loading = false
          this.button.text = '提交'
          const { status } = res.data
          if (status === 0) {
            this.$toast.success('提交成功')
            this.$router.go(-1)
          } else {
            this.$toast.fail(res.data.message)
          }
        })
        .catch(() => {
          this.button.disabled = false
          this.button.loading = false
          this.button.text = '提交'
        })
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .van-cell__title {
  font-size: 16px;
}
</style>
